<template>
  <el-dialog
    top="5vh"
    width="55%"
    title="IQC检验详情表"
    fullscreen
    append-to-body
    v-if="visible"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handleInspectionReset"
  >
    <div class="dialog-content">
      <div class="wrapper-btn">
        <el-button type="primary" size="small" @click="submitInspection()">提交检验</el-button>
      </div>
      <div id="J_report_table" class="report_table">
        <table border="0" style="display: table; margin: auto; border-collapse: collapse; width: 100%">
          <tbody>
            <tr style="height: 29pt">
              <td colspan="24" class="_A1 border-style">检验报告</td>
            </tr>
            <tr style="height: 20pt">
              <td colspan="6" class="_A2 td2 border-style">送检单号：{{ form.documentNo }}</td>
              <td colspan="6" class="_B2 td2 border-style">检验批号：{{ form.lotNo }}</td>
              <td colspan="6" class="_C2 td2 border-style">检验员： {{ form.principalName }}</td>
              <td colspan="6" class="_D2 td2 border-style">检验日期：{{ form.examineDate }}</td>
            </tr>
            <tr style="height: 26pt">
              <td colspan="6" class="_A3 border-style">物料编码</td>
              <td colspan="4" class="_B3 border-style">物料规格</td>
              <td colspan="4" class="_C3 border-style">供应商</td>
              <td colspan="4" class="_D3 border-style">厂家型号</td>
              <td colspan="2" class="_E3 border-style">丝印</td>
              <td colspan="4" class="_F3 border-style" style="width: 6%">送检日期</td>
            </tr>
            <tr style="height: 26pt">
              <td colspan="6" class="_A4 border-style">{{ form.partNo }}</td>
              <td colspan="4" class="_B4 border-style">{{ form.partModel }}</td>
              <td colspan="4" class="_C4 border-style">{{ form.partnerName }}</td>
              <td colspan="4" class="_D4 border-style">{{ form.partModel }}</td>
              <td colspan="2" class="_E4 border-style"></td>
              <td colspan="4" class="_F4 border-style">{{ form.sendExamineDate }}</td>
            </tr>
            <tr style="height: 26pt">
              <td rowspan="2" colspan="2" class="_A4 border-style" style="width: 6%">交货数量</td>
              <td rowspan="2" colspan="2" class="_B4 border-style" style="width: 6%">检验数量</td>
              <td rowspan="2" colspan="2" class="_C4 border-style" style="width: 6%">抽样方式</td>
              <td rowspan="1" colspan="3" class="_D4 border-style" style="width: 10%">AQL范围</td>
              <td rowspan="1" colspan="2" class="_E4 border-style" style="width: 6%">MA</td>
              <td rowspan="1" colspan="2" class="_F4 border-style" style="width: 6%">MI</td>
              <td rowspan="1" colspan="2" class="_G4 border-style" style="width: 6%">CR</td>
              <td rowspan="2" colspan="2" class="_H4 border-style" style="width: 10%">合格数量</td>
              <td rowspan="2" colspan="2" class="_I4 border-style">退货数量</td>
              <td rowspan="2" colspan="2" class="_J4 border-style">让步接收数量</td>
              <td rowspan="2" colspan="3" class="_K4 border-style" style="width: 6%">检验结果</td>
            </tr>
            <tr style="height: 13pt">
              <td colspan="1" class="_L4 border-style">MA</td>
              <td colspan="1" class="_M4 border-style">MI</td>
              <td colspan="1" class="_N4 border-style">CR</td>
              <td colspan="1" class="_O4 border-style">Ac</td>
              <td colspan="1" class="_P4 border-style">Re</td>
              <td colspan="1" class="_Q4 border-style">Ac</td>
              <td colspan="1" class="_R4 border-style">Re</td>
              <td colspan="1" class="_S4 border-style">Ac</td>
              <td colspan="1" class="_T4 border-style">Re</td>
            </tr>
            <tr style="height: 26pt">
              <td rowspan="1" colspan="2" class="_A5 border-style">{{ form.sendExamineQuantity || 0 }}</td>
              <td rowspan="1" colspan="2" class="_B5 border-style" style="padding: 0 10px"></td>
              <td rowspan="1" colspan="2" class="_C5 border-style" style="padding: 0 10px"></td>
              <td rowspan="1" colspan="1" class="_D5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_E5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_F5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_G5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_H5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_I5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_J5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_K5 border-style">{{}}</td>
              <td rowspan="1" colspan="1" class="_L5 border-style">{{}}</td>
              <td rowspan="1" colspan="2" class="_M5 border-style">{{ form.okQuantity || 0 }}</td>
              <td rowspan="1" colspan="2" class="_N5 border-style">{{ form.returnQuantity || 0 }}</td>
              <td rowspan="1" colspan="2" class="_O5 border-style">{{ form.acceptQuantity || 0 }}</td>
              <td rowspan="1" colspan="3" class="_P5 border-style" style="width: 6%">
                <span style="color: orange" v-if="form.examineResult == 'OK'">合格</span>
                <span style="color: red" v-else>不合格</span>
              </td>
            </tr>
            <tr style="height: 26pt">
              <td rowspan="2" colspan="2" class="_A6 border-style">检验项目</td>
              <td rowspan="2" colspan="7" class="_B6 border-style">指标</td>
              <td rowspan="1" colspan="15" class="_C6 border-style">明细数据</td>
            </tr>
            <tr style="height: 13pt">
              <td rowspan="1" colspan="1" class="_D6 border-style" style="width: 6%">1</td>
              <td rowspan="1" colspan="1" class="_E6 border-style" style="width: 6%">2</td>
              <td rowspan="1" colspan="1" class="_F6 border-style" style="width: 6%">3</td>
              <td rowspan="1" colspan="1" class="_G6 border-style" style="width: 6%">4</td>
              <td rowspan="1" colspan="1" class="_H6 border-style" style="width: 6%">5</td>
              <td rowspan="1" colspan="1" class="_I6 border-style" style="width: 6%">6</td>
              <td rowspan="1" colspan="1" class="_J6 border-style" style="width: 6%">7</td>
              <td rowspan="1" colspan="1" class="_K6 border-style" style="width: 6%">8</td>
              <td rowspan="1" colspan="1" class="_L6 border-style" style="width: 6%">9</td>
              <td rowspan="1" colspan="1" class="_M6 border-style" style="width: 6%">10</td>
              <td rowspan="1" colspan="5" class="_N6 border-style">结果</td>
            </tr>
            <tr style="height: 26pt" v-for="(item, index) of inspectionItemList" :key="index">
              <td colspan="2" class="_A7 border-style">包装</td>
              <td colspan="7" class="_B7 border-style"></td>
              <td colspan="1" class="_C7 border-style"></td>
              <td colspan="1" class="_D7 border-style"></td>
              <td colspan="1" class="_E7 border-style"></td>
              <td colspan="1" class="_F7 border-style"></td>
              <td colspan="1" class="_G7 border-style"></td>
              <td colspan="1" class="_H7 border-style"></td>
              <td colspan="1" class="_I7 border-style"></td>
              <td colspan="1" class="_J7 border-style"></td>
              <td colspan="1" class="_K7 border-style"></td>
              <td colspan="1" class="_L7 border-style"></td>
              <td colspan="5" class="_N7 border-style">
                <el-radio-group v-model="form.radio">
                  <el-radio label="OK">合格</el-radio>
                  <el-radio label="NG">不合格</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr style="height: auto">
              <td colspan="12" style="height: 100%; padding: 10px" class="_A8 border-style">
                <table class="table_2" border="0" style="margin: auto; border-collapse: collapse; width: 100%; height: 100%">
                  <tbody>
                    <tr>
                      <td colspan="12" class="border-style_2">
                        <div class="record-header">
                          <span> 缺陷记录 </span>
                          <div class="wrapper-record">
                            <span @click="handleAdd()">添加</span>
                            <span @click="handleDelete()">删除</span>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="1" class="border-style_2">序号</td>
                      <td colspan="1" class="border-style_2">缺陷描述</td>
                      <td colspan="1" class="border-style_2">缺陷数量</td>
                    </tr>
                    <tr v-for="(item2, index2) in defectRecordList" :key="index2">
                      <td colspan="1" class="border-style_2">{{ index2 }}</td>
                      <td colspan="1" class="border-style_2"></td>
                      <td colspan="1" class="border-style_2"></td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td colspan="12" class="_B8 border-style">
                <span style="color: orange">提示：</span> 1、检验结果只要有一个检验项目不合格，当前批次物料就不合格，可在IQC检验报表中导出PDF文件到当前系统文件夹下。
                2、若有来料不良则需要在品质管理模块下进行来料不良处理
              </td>
            </tr>
            <tr style="height: 26pt">
              <td colspan="2" class="_A9 border-style">备注</td>
              <td colspan="22" class="_B9 border-style"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-delete" @click="handleInspectionReset">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getDetail } from '@/api/quality/iqc-inspection-records';
export default {
  name: 'viewIqcInspectionReport',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      sampleMethodList: [
        {
          dictValue: '免检',
          dictKey: 'EXEMPTION'
        },
        {
          dictValue: '抽检',
          dictKey: 'SAMPLING'
        },
        {
          dictValue: '全检',
          dictKey: 'FULLINSPECTION'
        }
      ],
      inspectionItemList: [1, 2, 4, 5],
      defectRecordList: [1, 3, 4]
    };
  },
  methods: {
    handleAdd() {
      this.defectRecordList.push(2);
    },
    handleDelete() {
      this.defectRecordList.splice(this.defectRecordList.length - 1, 1);
    },
    handleInspectionReset() {
      //   this.$refs.editForm.resetForm();
      this.$emit('update:visible', false);
      this.$emit('closeDialog');
    },
    handleEditSubmit() {
      console.log(this.form);
    },
    async getData(id) {
      // console.log(id)
      try {
        const res = await getDetail(id);
        const data = res.data.data;
        this.form = data;
        // this.basicInfoForm.attachments =
        //   (data.qmsInspectionAttachmentList.length &&
        //     data.qmsInspectionAttachmentList.map((item) => ({
        //       value: item.link,
        //       label: item.attachmentName
        //     }))) ||
        //   [];
      } catch (e) {
        console.log(e);
      } finally {
      }
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  position: relative;
  .wrapper-btn {
    display: flex;
    padding-bottom: 20px;
    padding-top: 10px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
  }
}
::v-deep .el-dialog .el-dialog__body {
  padding: 10px 0px 30px !important;
}

.report_table {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 1.42857143;
  color: rgb(0, 0, 0);
  padding: 20px 20px;
  text-align: center;
  vertical-align: middle;
  ._A1 {
    font-size: 20pt;
  }
  .td2 {
    width: 20%;
    text-align: start;
  }
  .td3 {
  }
  .border-style {
    border-left: solid 1px rgb(0, 0, 0);
    border-right: solid 1px rgb(0, 0, 0);
    border-top: solid 1px rgb(0, 0, 0);
    border-bottom: solid 1px rgb(0, 0, 0);
  }
  .width-style {
    width: 100pt;
  }
  .table_2 {
    .border-style_2 {
      border-left: solid 1px rgb(0, 0, 0);
      border-right: solid 1px rgb(0, 0, 0);
      border-top: solid 1px rgb(0, 0, 0);
      border-bottom: solid 1px rgb(0, 0, 0);
    }
  }
  .record-header {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    .wrapper-record {
      color: blueviolet;
      span {
        margin-left: 10pt;
      }
    }
  }
}
</style>
